<template>
  <div class="card">
    <div class="card-img">
      <img
        class="img-view"
        src="https://pic4.zhimg.com/80/e28f181833fece013c9b1a688ff310f3_720w.jpg"
      />
    </div>
    <div class="main">
      你好，
      <span class="title">周元</span>。还记得《
      <span class="title">少年派的奇幻漂流</span>》（于
      <span class="title">
        2020-06-06
        22:30:00
      </span>观看）这部作品吗？ShareMan十分期待你对这部电影的
      看法，邀请你对他进行评分。总评分将由大家的评分共同组成。
    </div>
    <div class="footer">
      <div id="query">
        <div id="qrcode" ref="qrcode"></div>
      </div>
      <p class="tuo">
        长按图片可 扫码/保存海报
        https://share-man.com/movie/456
        ShareMan's Box
      </p>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: 'Home',
  methods: {
    qrcode () {
      let qrcode = new QRCode('qrcode', {
        width: 86, // 设置宽度，单位像素
        height: 86, // 设置高度，单位像素
        text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
      })
      console.log(qrcode)
    }
  },
  created () {
    this.$nextTick(() => {
      this.qrcode()
    })
  }
}
</script>

<style lang="stylus" scoped>
.card {
  border-radius: 8px;
  border: 1px solid #efefef;
  margin: 16px;
  overflow: hidden;
  max-width: 400px
  box-shadow: 4px 4px 10px rgba(0,0,0,.1)
  .card-img {
    width: 100%;
    height: 300px;
    background-color: #eee;

    .img-view {
      overflow: hidden;
      position: relative;
      height: 300px
      width:100%
      object-fit: cover
    }
  }
}

.main {
  line-height: 2;
  font-size: 12px;
  padding: 16px;

  .title {
    color: #00FFFF;
  }
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center
  padding: 16px
  border-top: 1px dotted #dacfcf
  #qrcode{
    display: block;
    width: 86px;
  }
  .tuo {
    padding-left: 12px;
    font-size: 12px;
    line-height: 1.2;
    color:#999
    margin-left: 5px
  }
}
</style>
